
<template>
  <div>
    <h5>标题</h5>
    <h4>{{LostObject.title}}
    </h4>

    <a-divider />
    <h5>内容</h5>
    <h4>{{LostObject.text}}
    </h4>
    <a-divider />
    <h5>首页图片</h5>
    <img
        :width="200"
        :src="LostObject.indexImgPath"
        @click="previewImg(LostObject.indexImgPath)"
    />
    <a-divider />

    <h5>补充图片</h5>

      <img
      :width="200"
      v-for="(item, index) in LostObject.images"
      :key="index"
      :src="item"
      @click="showImg(index)"
     />

    <a-divider />
    <h5>回复</h5>

    <a-list
        class="comment-list"
        :pagination="pagination"

        item-layout="horizontal"
        :data-source="this.LostObject.messages"
    >
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-comment :author="item.sentUserName" avatar="	https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
          <template slot="actions">
            <span >回复</span>
          </template>
          <p slot="content">
            {{ item.message }}
          </p>
          <a-tooltip slot="datetime" :title="moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')">
            <span>{{ moment(item.sendTime).fromNow() }}</span>
          </a-tooltip>
        </a-comment>
      </a-list-item>
    </a-list>
    <a-divider />
    <h5>添加回复</h5>
    <a-comment>
      <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          alt="Han Solo"
      />
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="4" v-model="messageText"  />
        </a-form-item>


        <a-button @click="handleSubmit" v-show="loginState">
          回复
        </a-button>

        <a href="#/sign-in"  v-show="!loginState"> 登录之后回复 </a>



      </div>
    </a-comment>




  </div>
</template>

<script>



import moment from 'moment';
moment.locale("zh-cn");
import { message } from 'ant-design-vue';

export default ({
  components: {

  },
  data() {
    return {
      loginState:false,
      LostObject:{},
      messageText:"",
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 3,
      },

      moment,
    }
  },

  beforeCreate() {

    console.log(this.$route.query.data);
     //这里开始获取帖子信息
    this.$http({
      method: 'get',
      url: 'http://localhost:18082/loatandfound/messagelist',
      params: {
        lostId:this.$route.query.data,
      },
      headers:{
        user:localStorage.getItem("user"),
      }
    }).then((e)=>{

      this.LostObject=e.data.data;

    })




  },
  mounted(){
    if(localStorage.getItem("user")==null||localStorage.getItem("user")==""){
      this.loginState=false;

      console.log("当前没有登录");
    }else{
      this.loginState=true;

      console.log("当前已经登录");

    }
  },
  methods: {
    setStateZ(state){
      this.loginState=state;
    },
    handleChange(){},
    handleSubmit(){


      console.log("查看消息内容",this.messageText);
      this.$http({
        method: 'post',
        url: 'http://localhost:18082/loatandfound/addmessage',
        data: {
          sendLostId:this.$route.query.data,
          message:this.messageText
        },
        headers:{
          user:localStorage.getItem("user"),
        }
      }).then((e)=>{

        message.info("发布成功",3);
        this.messageText="";
        this.$http({
          method: 'get',
          url: 'http://localhost:18082/loatandfound/messagelist',
          params: {
            lostId:this.$route.query.data
          },
          headers:{
            user:localStorage.getItem("user"),
          }
        }).then((e)=>{

          this.LostObject=e.data.data;

        })

      })

    },
    previewImg (url) {
      this.$hevueImgPreview(url)
    },
    showImg(index) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: this.LostObject.images
      })
    }
  },
})

</script>

<style lang="scss">
</style>